<template>
  <div class="grant-commodity-choose">
    <el-dialog
      v-el-drag-dialog
      :close-on-click-modal="false"
      :visible.sync="visible"
      @close="handleCancel"
      title="选择商品"
      fullscreen
      center
    >
      <section class="select-inner">
        <div class="search">
          <div class="classTitle">分类</div>
          <div
            :class="['className', item.categoryId == chooseId ? 'choose' : '']"
            v-for="(item, i) in classList"
            :key="i"
            @click="changeChooseId(item)"
          >
            {{ item.categoryName }}
          </div>
          <div class="where">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
              size="small"
            >
              <el-form-item label="商品编号：">
                <el-input
                  v-model="formInline.id"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
              <el-form-item label="商品名称：">
                <el-input
                  v-model="formInline.name"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
              <el-form-item label="售价-最低价：">
                <el-input
                  oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                  @blur="minBlur"
                  v-model="formInline.min"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
              <el-form-item label="售价-最高价：">
                <el-input
                  oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                  @blur="maxBlur"
                  v-model="formInline.max"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>

              <el-form-item>
                <el-button
                  type="primary"
                  @keyup.enter.native="onSubmit"
                  @click="onSubmit"
                  >查询</el-button
                >
                <el-button @click="onRest">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="mainList" v-loading="loading">
          <el-row>
            <el-col
              v-for="(item, index) in commodityList"
              :key="item.goodsId"
              :span="5"
            >
              <div class="commodity-list-item">
                <div class="checkBox">
                  <el-radio v-model="selectGoods" :label="item">&nbsp;</el-radio>
                </div>
                <div class="item-img">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="点击查看详情"
                    placement="top"
                  >
                    <img
                      @click="getDetailFun(item.goodsId)"
                      :src="item.goodsImage"
                      class="bg"
                    />
                  </el-tooltip>
                </div>
                <div class="item-title" :title="item.goodsName">
                  {{ item.goodsName }}
                </div>
                <p class="item-mark etc">商品编号：{{ item.goodsNo || "" }}</p>
                <p class="item-mark etc">
                  售价：<span class="price">{{
                    "￥" + getDouble(item.salePrice)
                  }}</span>
                </p>
              </div>
            </el-col>
            <div v-if="commodityList.length <= 0" class="nodata">
              <img src="./nodata.png" />
            </div>
          </el-row>
        </div>
        <div class="pageInfo">
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
          />
        </div>
      </section>
      <div slot="footer" class="dialog-footer">
        <div class="textMesg">
          已选择 <span class="cnum">{{ selectGoods.goodsName || '' }}</span>
        </div>
        <el-button type="primary" @click="addFun" style="padding: 8px 30px"
          >确认</el-button
        >
        <el-button style="padding: 8px 30px" @click="handleCancel()"
          >返回</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="商品详情"
      append-to-body
      :visible.sync="dialogVisible"
      width="70%"
      custom-class="goodsDialog"
      center=""
      v-el-drag-dialog
    >
      <el-form label-position="left" size="mini">
        <el-row>
          <el-col :span="24">
            <el-form-item label="商品介绍：">
              <p v-html="view.goodsH5Desc"></p>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="商品名称：">
              <span>{{ view.goodsName || "" }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品售价：">
              <span style="color: red">{{ "￥" + view.salePrice || "" }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品编号：">
              <span>{{ view.goodsNo || "" }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品标题：">
              <span>{{ view.goodsTitle || "" }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品图片：">
              <el-image
                class="goodsImg"
                v-for="(item, i) in view.goodsImage"
                :key="i"
                :src="item.imgSrc"
                @click="imgShowView(item.imgSrc)"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
              <el-image-viewer
                v-if="showViewer"
                :on-close="closeViewer"
                :url-list="[PreviewUrl]"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="view.goodsShopDetailVO">
            <el-form-item label="店铺名称：">
              <span>{{ view.goodsShopDetailVO.shopName || "" }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="view.goodsShopDetailVO">
            <el-form-item label="店铺评分：">
              <el-rate
                style="margin-top: 5px"
                v-model="view.goodsShopDetailVO.shopScore"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}分"
              >
              </el-rate>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="view.goodsShopDetailVO">
            <el-form-item label="店铺描述：">
              <span>{{ view.goodsShopDetailVO.shopDescribe }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="view.goodsShopDetailVO">
            <el-form-item label="店铺logo：">
              <el-image
                class="logo"
                :src="view.goodsShopDetailVO.shopLogo"
                @click="imgShowView(view.goodsShopDetailVO.shopLogo)"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeInfo">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { queryPage, getClass, add, detail } from './api'
import CryptoJS from '@/utils/aesJiaJM'
import Pagination from '@/components/Pagination'
import elDragDialog from '@/directive/el-drag-dialog'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  name: 'commChoose',
  components: { Pagination, ElImageViewer },
  directives: { elDragDialog },
  props: ["activityd"],
  data() {
    return {
      dialogVisible: false,
      view: {
        // goodsShopDetailVO: {}
      },
      formInline: {
        id: '',
        name: '',
        min: '',
        max: ''
      },
      chooseNum: 0,
      chooseCommList: [],
      commodityList: [],
      visible: false,
      loading: false,
      chooseId: '',
      classList: [],
      list: [],
      listQuery: {
        page: 1,
        limit: 10
      },
      total: 0,
      PreviewUrl: '',
      showViewer: false,
			selectGoods: ''
    }
  },
  computed: {

  },
  created() {
    this.visible = true
    this.getClassFun()
  },
  methods: {
    getDouble(p) {
      var re = /([0-9]+.[0-9]{2})[0-9]*/;
      return p ? p.replace(re, "$1") : ''

    },
    closeInfo() {
      this.dialogVisible = false
      this.view = {}
    },
    // 打开大图
    imgShowView(item) {
      this.PreviewUrl = item
      this.showViewer = true
    },
    // 关闭预览
    closeViewer() {
      this.showViewer = false
    },
    getDetailFun(id) {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        detail({ goodsId: id }).then(response => {
          loading.close()
          if (response.data.code = '200') {
            this.view = response.data.data
            if (response.data.data.goodsImage) {
              try {
                this.view.goodsImage = JSON.parse(response.data.data.goodsImage)
                console.log('imgs', this.view.goodsImage)
              } catch (error) {
                this.view.goodsImage = []
              }

            }
            this.dialogVisible = true
            console.log(response.data.data)
          }

        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    },
    addFun() {
      if (!this.selectGoods.goodsId) {
        this.$message.error('请选择商品')
        return
      }
      this.$emit('comit', this.selectGoods)

    },
    minBlur(e) {
      this.formInline.min = e.target.value
    },
    maxBlur(e) {
      this.formInline.max = e.target.value
    },
    getClassFun() {
      return new Promise((resolve, reject) => {
        getClass().then(response => {
          if (response.data.code = '200') {
            this.classList = response.data.data
            this.chooseId = this.classList[0].categoryId
            this.getList()
          }

        }).catch(error => {
          reject(error)
        })
      })
    },
    chooseCommFun(e, id) {
      let index = this.chooseCommList.indexOf(id)
      if (e) {
        if (index == -1) {
          this.chooseCommList.push(id)
        }
      } else {
        if (index != -1) {
          this.chooseCommList.splice(index, 1)
        }
      }
    },
    onSubmit() {
      this.getList()
    },
    onRest() {
      for (const key in this.formInline) {
        this.formInline[key] = ""
      }
      this.listQuery.page = 1
      this.getList()
    },
    changeChooseId(item) {
      this.chooseId = item.categoryId
      this.getList()
    },
    handleCancel() {
      this.$emit('cancel')
    },
    getList(obj) {
      this.loading = true
      this.commodityList = []
      var query = {
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit,
        categoryId: this.chooseId,
        goodsName: this.formInline.name,
        goodsNo: this.formInline.id,
        maxSalePrice: this.formInline.max,
        minSalePrice: this.formInline.min
      }
      return new Promise((resolve, reject) => {
        queryPage(query).then(response => {
          this.commodityList = response.data.data.rows
          this.total = response.data.data.total
          this.loading = false
        }).catch(error => {
          reject(error)
          this.loading = false
        })
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" type="text/scss" >
@import "@/styles/mixin.scss";
.goodsImg {
  width: 150px;
  height: 150px;
  cursor: pointer;
}
.logo {
  width: 200px;
  height: 200px;
}
.goodsDialog {
  max-height: 89vh;
  .el-dialog__body {
    max-height: 70vh;
  }
}

.grant-commodity-choose {
  position: relative;
  .el-checkbox__inner {
    border-color: #409eff;
    width: 20px;
    height: 20px;
  }
  .el-checkbox__inner::after {
    height: 10px;
    left: 7px;
  }
  .dialog-footer {
    position: relative;
    .textMesg {
      position: absolute;
      left: 70px;
      top: 10px;
      font-family: "Arial-BoldMT", "Arial Bold", "Arial";
      font-weight: 700;
      font-style: normal;
      color: #333;
      .cnum {
        color: red;
      }
      .bmesg {
        margin-left: 20px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        color: #999999;
      }
    }
  }
  .select-inner {
    max-height: calc(100vh - 130px);
    min-height: calc(100vh - 130px);
    display: flex;
    flex-direction: column;
    position: relative;
    &::after {
      content: "";
      height: 1px;
      background-color: #e2e3e8;
      position: absolute;
      bottom: 0;
      left: -20px;
      right: -20px;
    }
    .search {
      height: 100px;
      padding-top: 10px;
      .classTitle {
        display: inline-block;
        font-family: "ArialMT", "Arial";
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        color: #999999;
      }
      .className {
        font-size: 18px;
        display: inline-block;
        margin-left: 25px;
        font-family: "Arial-BoldMT", "Arial Bold", "Arial";
        font-weight: 700;
        font-style: normal;
        color: #333333;
        cursor: pointer;
        &.choose {
          @include font-color($mainColor);
        }
      }
      .where {
        margin-top: 20px;
      }
    }
    .mainList {
      flex: 1;
      overflow: auto;
      background: #fcfcfc;
      .el-row {
        .el-col-5 {
          width: 20%;
        }
      }
      .commodity-list-item {
        background-color: #ffffff;
        padding: 10px 10px 0;
        padding-bottom: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
        box-shadow: 0 5px 10px rgba(254, 90, 97, 0.05);
        position: relative;
        .checkBox {
          position: absolute;
          left: 5px;
          top: 5px;
          z-index: 2;
        }
        .item-img {
          width: 100%;
          height: 183px;
          position: relative;
          text-align: center;
          cursor: pointer;
          .bg {
            width: 162px;
            height: 100%;
            z-index: 0;
            &:hover {
              transform: scale(1.1, 1.1);
              filter: contrast(130%);
            }
          }
        }
        .item-title {
          margin: 10px 0;
          font-family: "Arial-BoldMT", "Arial Bold", "Arial";
          font-weight: 600;
          font-style: normal;
          font-size: 15px;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          height: 35px;
        }
        .item-mark {
          font-size: 12px;
          margin: 5px 0;
          line-height: 1.5;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: #333;
          .price {
            color: red;
            font-size: 16px;
          }
        }
        .item-type {
          height: 20px;
          line-height: 20px;
          .type-gate {
            margin-right: 5px;
            img {
              width: 40px;
            }
          }
          .type-exam {
            img {
              width: 40px;
            }
          }
          .type-num {
            color: #333333;
            font-weight: 400;
            font-size: 12px;
            float: right;
          }
        }
        .item-btns {
          display: flex;
          margin-top: 10px;
          position: relative;
          .el-button {
            flex: 1;
            span {
              font-size: 14px;
              font-weight: 500;
            }
          }
          &:before {
            content: "";
            position: absolute;
            top: 0;
            left: -10px;
            right: -10px;
            height: 1px;
            background-color: #e2e3e8;
          }
        }
      }
    }
    .pageInfo {
    }
  }
}
</style>
